Web Development SVG এর মৌলিক গঠন গাইড ও নোট

SVG (Scalable Vector Graphics) একটি XML ভিত্তিক ফরম্যাট যা ভেক্টর গ্রাফিক্স তৈরি ও প্রদর্শনের জন্য ব্যবহৃত হয়। এটি একটি টেক্সট ফাইল হিসেবে কাজ করে, যা চিত্রের বিভিন্ন উপাদান ও বৈশিষ্ট্য সংজ্ঞায়িত করে। এসভিজি ফাইলের গঠন সাধারনত সহজ এবং মানুষের পড়তে পারার মতো হয়, কারণ এটি XML ভাষায় লেখা থাকে।

SVG এর মৌলিক গঠন

এসভিজি ফাইল মূলত একটি XML ডকুমেন্ট, যেখানে বিভিন্ন গ্রাফিক উপাদান (যেমন, লাইন, রেকটেঙ্গল, সার্কেল ইত্যাদি) এবং তাদের বৈশিষ্ট্য নির্ধারণ করা হয়। এটি সাধারণত <svg> ট্যাগ দিয়ে শুরু হয় এবং একই ট্যাগে শেষ হয়। নিচে SVG এর একটি সাধারণ গঠন বর্ণনা করা হলো:

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
  <circle cx="250" cy="250" r="100" stroke="black" stroke-width="3" fill="red" />
  <rect x="50" y="50" width="150" height="100" stroke="black" stroke-width="2" fill="blue" />
</svg>

এখানে,

• <svg>: এটি মূল SVG এলিমেন্ট, যেখানে গ্রাফিক্সের অন্যান্য উপাদানগুলি থাকে। xmlns অ্যাট্রিবিউটটি XML নামস্পেস নির্ধারণ করে।
• width এবং height: এই অ্যাট্রিবিউটগুলি এসভিজি এলিমেন্টের প্রস্থ এবং উচ্চতা নির্ধারণ করে।
• <circle>: এটি একটি বৃত্তের জন্য ব্যবহৃত ট্যাগ। cx, cy, এবং r হল বৃত্তের কেন্দ্র এবং রেডিয়াসের জন্য অ্যাট্রিবিউট।
• <rect>: এটি একটি রেকটেঙ্গলের জন্য ব্যবহৃত ট্যাগ। x, y, width, এবং height অ্যাট্রিবিউটগুলি রেকটেঙ্গলের অবস্থান ও আকার নির্ধারণ করে।
• stroke, stroke-width, এবং fill: এই অ্যাট্রিবিউটগুলি চিত্রের সীমানার রং, পুরুত্ব এবং ভিতরের রঙ নির্দেশ করে।

SVG এর উপাদান

1. ডকুমেন্ট এলিমেন্ট (Document Element):
   • <svg> ট্যাগটি এসভিজি ডকুমেন্টের মূল এলিমেন্ট। এটি সমস্ত গ্রাফিক উপাদানগুলিকে ধারণ করে।
2. গ্রাফিক উপাদান (Graphic Elements):
   • লেখা (Text): <text> ট্যাগের মাধ্যমে লেখা যোগ করা যায়। উদাহরণস্বরূপ: <text x="50" y="50">Hello SVG</text>.
   • রেখা (Line): <line> ট্যাগের মাধ্যমে একটি সরল রেখা আঁকা যায়। উদাহরণস্বরূপ: <line x1="10" y1="10" x2="100" y2="100" stroke="black" />.
   • বৃত্ত (Circle): <circle> ট্যাগ বৃত্ত আঁকার জন্য ব্যবহৃত হয়। উদাহরণস্বরূপ: <circle cx="50" cy="50" r="40" fill="blue" />.
   • রেকটেঙ্গল (Rectangle): <rect> ট্যাগ রেকটেঙ্গল আঁকার জন্য ব্যবহৃত হয়। উদাহরণস্বরূপ: <rect x="20" y="20" width="150" height="100" fill="green" />.
3. স্টাইলিং (Styling):

   • CSS: SVG উপাদানগুলিকে CSS দিয়ে স্টাইল করা যায়। উদাহরণস্বরূপ:

     <style>
       circle { fill: red; }
       rect { fill: blue; }
     </style>
     

4. অ্যানিমেশন (Animation):
   • SVG এর মধ্যে CSS বা JavaScript এর মাধ্যমে অ্যানিমেশন যোগ করা যায়। উদাহরণস্বরূপ, <animate> ট্যাগ ব্যবহার করে উপাদানের গতি পরিবর্তন করা যায়।

SVG এর অন্যান্য বৈশিষ্ট্য

• পথ (Path): <path> ট্যাগ দিয়ে জটিল আকৃতি তৈরি করা যায়, যা একটি সিঙ্গেল লাইন দিয়ে বিভিন্ন বাঁকানো রেখা, বক্ররেখা, এবং কোণ সৃষ্টি করতে সক্ষম।
• গ্রেডিয়েন্ট (Gradient): এসভিজিতে রঙের গ্রেডিয়েন্ট তৈরি করা যায়, যা একটি নির্দিষ্ট রঙ থেকে অন্য রঙে পরিবর্তিত হয়।

<defs>
  <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
    <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
  </linearGradient>
</defs>
<rect width="300" height="100" fill="url(#grad1)" />

এসভিজি একটি অত্যন্ত শক্তিশালী এবং নমনীয় প্রযুক্তি, যা সহজে কাস্টমাইজ এবং এক্সটেন্ড করা যায়। এর মৌলিক গঠন খুবই সরল, তবে এর মাধ্যমে জটিল এবং ইন্টারঅ্যাকটিভ গ্রাফিক্স তৈরি করা সম্ভব।

এসভিজি (Scalable Vector Graphics) একটি XML ভিত্তিক ফরম্যাট, যা ওয়েব পেজে ভেক্টর গ্রাফিক্স তৈরি করতে ব্যবহৃত হয়। এসভিজি ফাইলের মাধ্যমে গ্রাফিক্স তৈরি করার জন্য কিছু মৌলিক সিমেন্টিক্স বা ট্যাগ ব্যবহার করা হয়। এসভিজি ফাইলের স্ট্রাকচার এবং তার উপাদানগুলোর জন্য যে সিমেন্টিক্স ব্যবহৃত হয়, তা জানা ওয়েব ডেভেলপারদের জন্য অত্যন্ত গুরুত্বপূর্ণ। এখানে এসভিজি এর মৌলিক সিমেন্টিক্স (tags) এবং তাদের ব্যাখ্যা দেওয়া হল।

SVG ট্যাগ

<svg>: এটি মূল এসভিজি ডকুমেন্টের রুট এলিমেন্ট। এসভিজি গ্রাফিক্স তৈরি করতে, প্রথমে এই ট্যাগে সমস্ত উপাদান বা গ্রাফিক্স যোগ করতে হয়। এই ট্যাগে width, height, viewBox এর মতো অ্যাট্রিবিউট ব্যবহার করা হয় যা চিত্রের সাইজ এবং দৃশ্যমান অঞ্চল নির্ধারণ করে।

উদাহরণ:

<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
  <!-- SVG Content goes here -->
</svg>

গ্রাফিক্স উপাদান

<circle>: এটি একটি বৃত্ত (circle) তৈরি করতে ব্যবহৃত হয়। এর জন্য সাধারণত cx, cy, r অ্যাট্রিবিউট ব্যবহৃত হয় যা বৃত্তের কেন্দ্রের অবস্থান এবং তার ব্যাসার্ধ নির্ধারণ করে।

উদাহরণ:

<circle cx="250" cy="250" r="100" stroke="black" stroke-width="4" fill="red" />

<rect>: এটি একটি আয়তক্ষেত্র (rectangle) তৈরি করতে ব্যবহৃত হয়। এর জন্য x, y, width, এবং height অ্যাট্রিবিউট ব্যবহৃত হয়।

উদাহরণ:

<rect x="50" y="50" width="200" height="100" stroke="black" stroke-width="4" fill="blue" />

<line>: এটি একটি সোজা রেখা (line) তৈরি করতে ব্যবহৃত হয়। এর জন্য x1, y1, x2, y2 অ্যাট্রিবিউট ব্যবহার করা হয় যা রেখার শুরু এবং শেষ পয়েন্ট নির্ধারণ করে।

উদাহরণ:

<line x1="0" y1="0" x2="200" y2="200" stroke="green" stroke-width="4" />

<polygon>: এটি একাধিক পয়েন্টের মাধ্যমে একটি পলিগন তৈরি করতে ব্যবহৃত হয়। এর জন্য points অ্যাট্রিবিউট ব্যবহার করা হয়, যেখানে একাধিক পয়েন্ট সেপারেটেড দ্বারা উল্লেখ করা হয়।

উদাহরণ:

<polygon points="200,10 250,190 160,210" stroke="purple" stroke-width="4" fill="yellow" />

<path>: এটি একটি মাল্টি-পয়েন্ট রুট (curve) তৈরি করতে ব্যবহৃত হয়। এর জন্য d অ্যাট্রিবিউট ব্যবহার করা হয়, যা বিভিন্ন ধরনের মুভ, লাইন, কেভ, এবং ক্লোজিং অপারেশন নির্ধারণ করে।

উদাহরণ:

<path d="M10 10 H 90 V 90 H 10 Z" stroke="black" stroke-width="4" fill="transparent" />

টেক্সট উপাদান

<text>: এসভিজিতে টেক্সট প্রদর্শন করতে <text> ট্যাগ ব্যবহার করা হয়। এর জন্য x, y অ্যাট্রিবিউট ব্যবহার করা হয়, যা টেক্সটের অবস্থান নির্ধারণ করে।

উদাহরণ:

<text x="50" y="50" font-family="Verdana" font-size="35" fill="blue">Hello, SVG!</text>

অন্যান্য উপাদান

<g>: এটি একটি গ্রুপ ট্যাগ, যার মাধ্যমে একাধিক গ্রাফিক্স উপাদানকে একটি গ্রুপে জড়ো করা যায়। এটি একসাথে রূপান্তর (transformation), স্টাইল বা অন্যান্য প্রপার্টি প্রয়োগ করতে সহায়তা করে।

উদাহরণ:

<g transform="translate(50,50)">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  <rect x="100" y="100" width="80" height="80" stroke="black" stroke-width="3" fill="green" />
</g>

<defs> এবং <use>: এসভিজি ফাইলের মধ্যে পুনরাবৃত্তি গ্রাফিক্স তৈরি করতে <defs> এবং <use> ট্যাগ ব্যবহার করা হয়। <defs> ট্যাগের মধ্যে উপাদানগুলো সংজ্ঞায়িত করা হয় এবং <use> ট্যাগের মাধ্যমে সেগুলো পুনরায় ব্যবহার করা হয়।

উদাহরণ:

<defs>
  <circle id="myCircle" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="blue" />
</defs>
<use href="#myCircle" x="100" y="100" />
<use href="#myCircle" x="200" y="200" />

সারাংশ

এসভিজি (SVG) এর মৌলিক সিমেন্টিক্স বা ট্যাগগুলো ওয়েব পেজে গ্রাফিক্স তৈরি করার একটি শক্তিশালী মাধ্যম। এর মাধ্যমে বিভিন্ন ধরনের চিত্র যেমন বৃত্ত, আয়তক্ষেত্র, রেখা, পলিগন, এবং পথ তৈরি করা সম্ভব। এই সিমেন্টিক্স এবং ট্যাগগুলোর মাধ্যমে এসভিজি ডকুমেন্টের গঠন এবং কাস্টমাইজেশন করা যায়।

SVG ফরম্যাটে গ্রাফিক্স প্রদর্শন করার জন্য <svg> ট্যাগ ব্যবহৃত হয়। এই ট্যাগটি SVG ডকুমেন্টের মূল কন্টেইনার হিসেবে কাজ করে এবং এর মধ্যে বিভিন্ন গ্রাফিক্যাল উপাদান (যেমন, রেকটেঙ্গল, সার্কেল, লাইন ইত্যাদি) অন্তর্ভুক্ত করা হয়। <svg> ট্যাগের বিভিন্ন এট্রিবিউটস (Attributes) আছে, যা গ্রাফিক্সের আকার, স্থান, রং এবং অন্যান্য বৈশিষ্ট্য কনফিগার করার জন্য ব্যবহৃত হয়।

<svg> ট্যাগ

<svg> ট্যাগটি ব্যবহার করে আপনি একটি SVG কন্টেইনার তৈরি করেন, যার মধ্যে বিভিন্ন গ্রাফিক্যাল উপাদান রাখা হয়। সাধারণভাবে, এটি একটি ওয়েব পেজের অংশ হিসেবে কাজ করে, যেখানে গ্রাফিক্স, চিত্র বা অ্যানিমেশন প্রদর্শিত হয়।

উদাহরণ:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="80" stroke="black" stroke-width="4" fill="yellow" />
</svg>

এখানে, <svg> ট্যাগটি একটি 200x200 পিক্সেলের ক্যানভাস তৈরি করেছে এবং একটি হলুদ রঙের বৃত্ত (circle) আঁকছে যার ব্যাসার্ধ 80।

<svg> ট্যাগের প্রধান এট্রিবিউটস

1. width এবং height:
   • এগুলো দ্বারা SVG ক্যানভাসের আকার নির্ধারিত হয়। এই এট্রিবিউটসের মান পিক্সেলে দেওয়া হয়।
   • উদাহরণ: width="500" height="300"
2. xmlns (XML Namespace):
   • এটি SVG এর XML namespace নির্ধারণ করে, যা ডকুমেন্টের মধ্যে SVG উপাদানগুলি সঠিকভাবে শনাক্ত করতে সাহায্য করে। এই namespace সাধারণত xmlns="http://www.w3.org/2000/svg" থাকে।
3. viewBox:
   • viewBox এট্রিবিউটটি গ্রাফিক্সের একটি নির্দিষ্ট অংশকে দর্শনীয় করে তোলে। এটি 4টি মান নেয়: min-x, min-y, width, এবং height।
   • উদাহরণ: viewBox="0 0 200 200" – এটি গ্রাফিক্সের একটি অংশ প্রদর্শন করবে যা 200x200 পিক্সেলের আকারে ফিট হবে।
4. preserveAspectRatio:
   • এই এট্রিবিউটটি গ্রাফিক্সের আকার পরিবর্তন করা হলে তার অনুপাত (aspect ratio) কিভাবে রক্ষা করা হবে তা নির্ধারণ করে।
   • উদাহরণ: preserveAspectRatio="xMidYMid meet"
5. style:
   • CSS স্টাইল নির্ধারণ করার জন্য ব্যবহৃত হয়, যাতে SVG গ্রাফিক্সের মধ্যে ইনলাইন স্টাইল প্রয়োগ করা যায়।
   • উদাহরণ: style="border: 1px solid black;"

অন্যান্য গুরুত্বপূর্ণ এট্রিবিউটস

1. id:
   • এটি SVG উপাদানের একটি ইউনিক আইডি সেট করে, যা JavaScript অথবা CSS এর মাধ্যমে সেই উপাদানটি চিহ্নিত করতে সহায়তা করে।
   • উদাহরণ: id="myCircle"
2. class:
   • এটি SVG উপাদানগুলিকে একটি নির্দিষ্ট CSS ক্লাসে যুক্ত করতে ব্যবহৃত হয়, যাতে সেই উপাদানগুলির জন্য একাধিক স্টাইল প্রয়োগ করা যায়।
   • উদাহরণ: class="circleClass"
3. x, y:
   • এগুলো SVG উপাদানগুলির অবস্থান নির্ধারণ করে, যেখানে x অনুভূমিক এবং y উল্লম্ব অবস্থান বোঝায়।
   • উদাহরণ: <rect x="50" y="50" width="150" height="150" />
4. fill:
   • এই এট্রিবিউটটি SVG উপাদানের ভেতরের রং নির্ধারণ করে।
   • উদাহরণ: fill="red"
5. stroke:
   • এটি SVG উপাদানের চারপাশের রং (বর্ডার) নির্ধারণ করে।
   • উদাহরণ: stroke="black"
6. stroke-width:
   • এটি SVG উপাদানের বর্ডারের প্রস্থ (width) নির্ধারণ করে।
   • উদাহরণ: stroke-width="5"

সারাংশ

<svg> ট্যাগ এবং তার এট্রিবিউটসের মাধ্যমে আপনি SVG ডকুমেন্টের বিভিন্ন গ্রাফিক্যাল উপাদান তৈরি ও কাস্টমাইজ করতে পারেন। এর মাধ্যমে ওয়েব পেজে স্কেলেবল এবং উচ্চমানের গ্রাফিক্স প্রদর্শন করা সম্ভব, যা ওয়েব ডিজাইনে অত্যন্ত কার্যকর।

SVG (Scalable Vector Graphics) একটি XML ভিত্তিক ফরম্যাট, যা গ্রাফিক্সের বিভিন্ন উপাদানকে কনটেইনারের মাধ্যমে সংজ্ঞায়িত করে। একটি SVG ফাইল সাধারণত গ্রাফিক্সের বেসিক আকার, রং, পাথ, এবং অন্যান্য বৈশিষ্ট্য ধারণ করে। এই ফাইল স্ট্রাকচারটি সহজ এবং মানুষের পাঠযোগ্য হওয়ায় সহজেই এডিট এবং কাস্টমাইজ করা যায়।

SVG ফাইল স্ট্রাকচার

SVG ফাইলের স্ট্রাকচার XML ডকুমেন্টের মতো, যেখানে একটি মূল <svg> ট্যাগ দিয়ে চিত্রের শুরুর অংশটি চিহ্নিত করা হয়। এর মধ্যে বিভিন্ন উপাদান যেমন <path>, <circle>, <rect>, <line>, <polygon> ইত্যাদি থাকে যা গ্রাফিক্সের বিভিন্ন অংশ গঠন করে। নিচে একটি সাধারণ SVG ফাইল স্ট্রাকচার দেখানো হলো:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  <rect x="20" y="20" width="60" height="60" stroke="black" stroke-width="2" fill="blue" />
  <line x1="10" y1="10" x2="90" y2="90" stroke="black" stroke-width="2" />
</svg>

এই ফাইলের মধ্যে:

• <svg>: এটি মূল কনটেইনার ট্যাগ যা গ্রাফিক্সের সীমানা নির্ধারণ করে।
• xmlns="http://www.w3.org/2000/svg": এটি SVG নেমস্পেস সংজ্ঞায়িত করে, যা XML এর জন্য অপরিহার্য।
• width এবং height: এই অ্যাট্রিবিউট দুটি SVG চিত্রের আকার নির্ধারণ করে।
• <circle>: একটি বৃত্ত তৈরি করে, যেখানে cx এবং cy কেন্দ্রে অবস্থান, r হলো ব্যাসার্ধ।
• <rect>: একটি আয়তক্ষেত্র তৈরি করে, যেখানে x এবং y এর মাধ্যমে শুরু বিন্দু নির্ধারণ করা হয়, এবং width ও height আকার নির্ধারণ করে।
• <line>: একটি রেখা তৈরি করে, যেখানে x1, y1, x2, এবং y2 দিয়ে রেখার শুরু এবং শেষ বিন্দু চিহ্নিত হয়।

SVG কনটেন্ট

একটি SVG কনটেন্টের মধ্যে বিভিন্ন উপাদান থাকে যা গ্রাফিক্সের বিভিন্ন পার্ট যেমন রং, আকার, লাইন, পাথ ইত্যাদি কনট্রোল করে। প্রধান উপাদানগুলো হলো:

1. Shapes (আকৃতিগুলি):

• <circle>: একটি বৃত্ত তৈরি করে।
• <rect>: একটি আয়তক্ষেত্র বা রেকটেঙ্গল তৈরি করে।
• <line>: একটি সোজা রেখা তৈরি করে।
• <polygon>: বহু-কোণী আকৃতি তৈরি করে।

2. Path (পাথ):

• <path>: এটি সবচেয়ে শক্তিশালী উপাদান, যা গ্রাফিক্সের জটিল রূপরেখা তৈরি করতে ব্যবহৃত হয়। d অ্যাট্রিবিউটের মাধ্যমে পাথের স্ট্রোক বা বেজিয়ার কেভের নির্দেশনা দেওয়া হয়।

3. Text (টেক্সট):

• <text>: এটি ওয়েব পেজে লেখা বা টেক্সট প্রদর্শনের জন্য ব্যবহার হয়। বিভিন্ন ফন্ট, সাইজ, রঙ ও অন্যান্য স্টাইল অ্যাট্রিবিউট দিয়ে টেক্সট কাস্টমাইজ করা যায়।

4. Styles (স্টাইল):

• style অ্যাট্রিবিউট: SVG উপাদানগুলির স্টাইল CSS এর মাধ্যমে নির্ধারণ করা হয়। যেমন, রং, রেখার পুরুত্ব, ছায়া ইত্যাদি।

5. Transforms (ট্রান্সফর্ম):

• transform: এটি SVG উপাদানের উপর বিভিন্ন রূপান্তর কার্যক্রম (যেমন, রোটেট, স্কেল, ট্রান্সলেট) প্রয়োগ করতে ব্যবহৃত হয়।

SVG ফাইলের কনটেন্টের উদাহরণ

নিচে একটি SVG কনটেন্টের উদাহরণ দেওয়া হলো যা বিভিন্ন উপাদান ব্যবহার করে একটি চিত্র তৈরি করেছে:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <rect x="10" y="10" width="180" height="180" stroke="black" stroke-width="5" fill="lightblue" />
  <circle cx="100" cy="100" r="50" stroke="green" stroke-width="4" fill="yellow" />
  <path d="M 50 150 Q 100 100 150 150" stroke="red" stroke-width="3" fill="transparent" />
  <text x="50" y="50" font-family="Verdana" font-size="20" fill="black">Hello SVG</text>
</svg>

এই উদাহরণে:

• একটি লাইট ব্লু রঙের রেকটেঙ্গল তৈরি হয়েছে।
• একটি হলুদ রঙের বৃত্তের মধ্যে গ্রীন রঙের সীমানা রয়েছে।
• একটি রেড রঙের কিউবিক বেজিয়ার পাথ রয়েছে।
• টেক্সট "Hello SVG" ওয়েব পেজে প্রদর্শিত হয়েছে।

SVG এর স্ট্রাকচার খুবই সহজ এবং স্বচ্ছ, যা ডেভেলপারদের জন্য কাস্টমাইজেশন এবং পরিবর্তন সহজ করে তোলে। এর মাধ্যমে ওয়েব পেজের গ্রাফিক্স এবং অ্যানিমেশন তৈরি করা অনেক বেশি সহজ ও কার্যকর।

SVG (Scalable Vector Graphics) একটি XML-ভিত্তিক ফাইল ফরম্যাট, যা ওয়েব পেজে গ্রাফিক্স প্রদর্শন করতে ব্যবহৃত হয়। SVG চিত্রের বিভিন্ন উপাদানগুলি XML কোডের মাধ্যমে সংজ্ঞায়িত করা হয় এবং এগুলির সাথে কাজ করার জন্য একটি DOM (Document Object Model) ব্যবহৃত হয়। DOM হলো একটি প্রোগ্রামিং ইন্টারফেস, যা HTML, XML বা SVG ডকুমেন্টের গঠন এবং উপাদানগুলির সাথে ইন্টারঅ্যাকশন করতে সহায়তা করে।

SVG এর DOM (Document Object Model)

SVG এর DOM হল একটি জাভাস্ক্রিপ্ট API, যা SVG ডকুমেন্টের বিভিন্ন উপাদানকে ম্যানিপুলেট (manipulate) এবং নিয়ন্ত্রণ (control) করার জন্য ব্যবহৃত হয়। SVG ডকুমেন্টের প্রতিটি উপাদান (যেমন <circle>, <rect>, <line>, <path>, ইত্যাদি) DOM-এর একটি নোড (node) হিসেবে কাজ করে, এবং এই উপাদানগুলির সাথে ইন্টারঅ্যাকশন করার জন্য বিভিন্ন মেথড (methods) ও প্রপার্টি (properties) ব্যবহার করা হয়।

SVG DOM এর বৈশিষ্ট্য

নোড বেসড স্ট্রাকচার: SVG এর DOM একটি নোড বেসড (node-based) স্ট্রাকচারে সংগঠিত। প্রতিটি SVG উপাদান যেমন একটি <circle> বা <path> একটি DOM নোড হিসেবে প্রতিনিধিত্ব করে। এই নোডগুলির মাধ্যমে গ্রাফিক্সের বৈশিষ্ট্য এবং আচরণ পরিবর্তন করা যায়।

এলিমেন্ট ম্যানিপুলেশন: SVG এর DOM জাভাস্ক্রিপ্টের মাধ্যমে SVG উপাদানগুলির গুণাগুণ বা বৈশিষ্ট্য পরিবর্তন করতে সহায়তা করে। উদাহরণস্বরূপ, <circle> এর cx, cy, r (radius) প্রপার্টি পরিবর্তন করা যায়, যার ফলে চিত্রের অবস্থান এবং আকার পরিবর্তিত হয়।

ইভেন্ট হ্যান্ডলিং: SVG DOM এ ইভেন্ট হ্যান্ডলিং (event handling) সমর্থিত। এটি ব্যবহারকারীর ইন্টারঅ্যাকশন (যেমন ক্লিক, মাউস মুভমেন্ট) ট্র্যাক করতে এবং সেই অনুযায়ী SVG উপাদানের পরিবর্তন করতে ব্যবহৃত হয়।

আনিমেশন: SVG DOM জাভাস্ক্রিপ্টের মাধ্যমে অ্যানিমেশন তৈরি করতে ব্যবহৃত হয়। উদাহরণস্বরূপ, একটি SVG উপাদানকে ধীরে ধীরে এক স্থান থেকে অন্য স্থানে সরানোর জন্য জাভাস্ক্রিপ্ট ব্যবহার করা যেতে পারে।

SVG DOM এর মাধ্যমে সাধারণ ম্যানিপুলেশন

উদাহরণ: একটি বৃত্তের অবস্থান পরিবর্তন করা

<svg width="200" height="200" id="svgCanvas">
  <circle id="myCircle" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

<script>
  var svg = document.getElementById('svgCanvas');
  var circle = document.getElementById('myCircle');

  // circle এর cx (center x) ও cy (center y) পরিবর্তন করা
  circle.setAttribute('cx', 100);
  circle.setAttribute('cy', 100);
</script>

এই কোডে, <circle> উপাদানের cx এবং cy প্রপার্টি জাভাস্ক্রিপ্ট ব্যবহার করে পরিবর্তন করা হয়েছে, যার ফলে বৃত্তটি নতুন অবস্থানে চলে যাবে।

SVG DOM এর ব্যবহারের সুবিধা

1. ডাইনামিক কন্টেন্ট: SVG DOM-এর মাধ্যমে ওয়েব পেজে ডাইনামিকভাবে গ্রাফিক্স তৈরি এবং ম্যানিপুলেট করা যায়। এটি ওয়েবসাইটে ইন্টারঅ্যাক্টিভ গ্রাফিক্স প্রদর্শনে সহায়তা করে।
2. এনিমেশন: SVG DOM জাভাস্ক্রিপ্ট বা CSS এর মাধ্যমে অ্যানিমেশন তৈরি করতে সক্ষম, যা ওয়েব পেজকে আরও আকর্ষণীয় ও ইন্টারঅ্যাকটিভ করে তোলে।
3. ইন্টারঅ্যাকটিভিটি: DOM ইভেন্ট হ্যান্ডলিং ব্যবহারের মাধ্যমে, ইউজার ইন্টারঅ্যাকশন (যেমন ক্লিক, ড্র্যাগ, হভার) এর ভিত্তিতে SVG উপাদান পরিবর্তন করা সম্ভব।
4. ইজি কাস্টমাইজেশন: SVG DOM সোজা কোড দিয়ে কাস্টমাইজ করা যায়, যা ওয়েব ডিজাইনারদের জন্য সহজ ও দ্রুত সমাধান প্রদান করে।

SVG এর DOM ব্যবহারের মাধ্যমে জাভাস্ক্রিপ্ট, CSS বা অন্যান্য ওয়েব প্রযুক্তি দ্বারা গ্রাফিক্সের কার্যকারিতা বৃদ্ধি করা সম্ভব। এটি ওয়েব পেজের ইউজার এক্সপিরিয়েন্সকে আরও উন্নত করে এবং ইন্টারঅ্যাকটিভ এবং ডাইনামিক উপাদান তৈরি করার সুযোগ দেয়।